<template>
    <li class="atten_list">
        <dl @click="gohome(item.id)">
            <dt>
                <img :src="rootList.userPhoto" alt="">
            </dt>
            <dd>
                <h3 class="f30">{{rootList.name}}</h3>
                <div class="label">
                    <span class="f20" v-for="(i, k) in rootList.domain ? rootList.domain.split(',') : ''" :key="k">{{i}}</span>
                </div>
                <button class="btn" @click.stop="qvxiao(true, rootList.id)">取消关注</button>
            </dd>
        </dl>
        <p class="introduce f28">{{rootList.content}}</p>
    </li>
</template>

<script>
    import Bus from '@/bus/bus.js'
    export default {
        name: 'attenList',
        props: {
            item: Object
        },
        data() {
            return {
                rootList: []
            }
        },
        methods:{
            qvxiao(bool, ids) {
                Bus.$emit('msg', {bools: bool, id: ids, type: '2'})
            },
            gohome(id) {
                this.$router.push({
                    path: '/mdetail',
                    query: {
                        id:id
                    }
                })
            }
        },
        created(){
            if(this.item) {
                this.rootList = this.item;
            }
        },
        mounted() {
            if(this.item) {
                this.rootList = this.item;
            }
        },
    }
</script>

<style lang="less" scoped>
    .atten_list{
        // .h(184);
        border-bottom: 1px solid #f2f2f2;
        dl{
            position: relative;
            .pl(164);
            .h(140);
            .pb(10);
            dt{
                position: absolute;
                top: 15px;
                left: 10px;
                border-radius: 5px;
                overflow: hidden;
                .w(124);
                .h(124);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            dd{
                h3{
                    .pt(30);
                    .lh(50);
                    font-weight: normal;
                }
                .label{
                    span{
                        .padd(4, 8);
                        border: 1px solid #189BEB;
                        border-radius: 5px;
                        color: #189BEB;
                        .mr(10);
                    }
                }
                .btn{
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    .w(140);
                    .h(50);
                    border: none;
                    color: #189BEB;
                    border: 1px solid #189BEB;
                    border-radius: 5px;
                    background: #fff;
                }
            }
        }
        .introduce{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            .p(20);
            .ellipsis(2);
            .lh(50);
        }
    }
</style>
